<template>
  <div id="tip_alertModal">
    <div class="t-alert-mask"></div>
    <div class="t-alert-container">
      <div class="t-alert-title">
        <span>
          {{title}}
        </span>
        <img @click="close" src="" alt="X">
      </div>
      <div class="t-alert-content">
        <span class="content-text">
          {{content}}
        </span>
      </div>
      <div class="t-alert-confirm">
        <button @click="confirm">确定</button>
        <!-- 默认是没有取消按钮的，data定义默认true false -->
        <button @click="cancel" v-show="cancelBtn" class="cancel-btn">取消</button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        show: true, // 通过这个属性，控制是否移除dom元素
        title:'', // 顶部标题
        content:'', // 内容
        cancelBtn: false // 取消按钮
      }
    },
    methods: {
      close(){
        // 右上角关闭
        this.a_close && this.a_close()
        this.show = false
        // 删除判断增加的window属性
        delete window.alertIsShow
      },
      confirm(){
        // 确定
        this.a_confirm && this.a_confirm()
        this.show = false
        // 删除判断增加的window属性
        delete window.alertIsShow
      },
      cancel(){
        // 取消
        this.a_cancel && this.a_cancel()
        this.show = false
        // 删除判断增加的window属性
        delete window.alertIsShow
      }
    },
    watch:{
      show(cur,old){
        // 通过监控data里的show属性  弹框有三个事件（右上角取消  确定按钮  取消按钮）
        // 每个事件写了 this.show = false
        // 当弹框出现的时候 点击任何一个事件  都会触发这里的监控事件  将页面上的弹框Dom移除
        if(cur == false){
          let tip_alert = document.getElementById('tip_alertModal');
          tip_alert.parentNode.removeChild(tip_alert)
        }
      }
    }
  }
</script>

<style lang="scss">
  #tip_alertModal {
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    z-index:100;

    .t-alert-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .3);
    }

    .t-alert-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width:240px;
      max-width: 400px;
      height: auto;
      background: #fff;
      border-radius: 4px;

      .t-alert-title {
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: rgba(115, 134, 255, 1);
        border-radius: 4px 4px 0px 0px;

        span {
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translate(0, -50%);
          font-size: 16px;
          font-weight: 500;
          color: #fff;
        }

        img {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translate(0, -50%);
          cursor: pointer;
        }
      }

      .t-alert-content {
        text-align: center;
        span{
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(51,51,51,1);
        }

        span.content-text {
          display: inline-block;
          width:100%;
          height:auto;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          padding:20px 18px;
        }
        .t-content-list{
          min-width:320px;
          height:auto;
          text-align: left;
          .list-title{
            position: relative;
            padding:10px 0 10px 10px;
            img{
              position: absolute;
              display: inline-block;
              width:20px;
              margin-right:10px;
            }
            span{
              display: inline-block;
              padding-left:31px;
              vertical-align: middle;
            }
          }
          .list-content{
            width:100%;
            height:auto;
            ul{
              padding-bottom:10px;
              li{
                width:100%;
                height:auto;
                padding-bottom:10px;
                span{
                  vertical-align: top;
                }
                span.title{
                  display: inline-block;
                  text-align: left;
                  padding-left:41px;
                  padding-right:3px;
                }
              }
            }
          }
        }
      }

      .t-alert-confirm {
        width: 100%;
        padding-bottom: 17px;
        text-align: center;

        button {
          display: inline-block;
          width: 80px;
          height: 36px;
          font-size: 16px;
          color: #fff;
          font-weight: 400;
          background: rgba(115, 134, 255, 1);
          border-radius: 4px;
          outline: none;
          border: none;
          cursor: pointer;
        }
        .cancel-btn{
          font-size:16px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          background:rgba(151,193,234,1);
          margin-left:20px;
        }
      }
    }
  }
</style>
